@extends('layouts.mobile')

@section('title', $news['title'])
@section('styles')
    <link href="{{asset('mui/css/mui.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('css/previewimage.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('layui/css/layui.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('font-awesome-4.7.0/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
    <style type="text/css">
        #app{
            background-color: #fff;
        }
        .mui-card{
            box-shadow: none;
        }
        .mui-card>.mui-card-header>.mui-media-body{
            width: 100%;
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
        .mui-card>.mui-card-header>.mui-media-body>h3{
            font-size: 18px;
            color: #393D49;
            margin-bottom: 5px;
            font-weight: bolder;
        }
        .content_block{
            line-height: 2em;
        }
        .mui-table-view>.mui-table-view-cell{
            padding: 0px 15px;
        }
        .content_block>.mui-table-view>.mui-table-view-cell
        {
            color: #8f8f94;
        }
        .content_block>img{
            width: 100%;
        }
        .block{
            display: none;
        }
    </style>
@stop
@section('content')
    <div class="mui-card block" v-on:click="detail(1)" @if($news['type'] ==1) style="display: block" @endif>
        <div class="mui-card-header">
            <div class="mui-media-body">
                <h3>{{$news['title']}}</h3>
                <p>{{$news['created_at']}}</p>
            </div>
        </div>
        <div class="mui-card-content">
            <div class="content_block">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">联系人：{{$news['contact_people']}}</li>
                    <li class="mui-table-view-cell">联系电话：<span class="dial" phone="{{$news['contact_phone']}}"> <i class="fa fa-phone" style="color: green;margin-right: 10px;"></i> {{$news['contact_phone']}}</span></li>
                    <li class="mui-table-view-cell">产地：{{$news['area']}}</li>
                    <li class="mui-table-view-cell">产量：{{$news['production']}}</li>
                    <li class="mui-table-view-cell">已销售：{{$news['has_pin']}}</li>
                    <li class="mui-table-view-cell">单价：{{$news['unit_price']}}</li>
                    <li class="mui-table-view-cell">单位：{{$news['unit']}}</li>
                </ul>
                <div class="mui-card">
                    <div class="mui-card-content" style="color: #8f8f94;">
                        <img src="{{$news['product_images'][0]}}" data-preview-src="{{$news['product_images'][0]}}" style="width: 100%;">
                        {{$news['product_desc']}}
                    </div>
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">以下为产品真实图片</div>
                </div>
                @foreach ($news['product_images'] as $images)
                    <img src="{{$images}}" data-preview-src="{{$images}}">
                @endforeach
                <div class="mui-card">
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">
                        @if ($uid === $news['uid'])
                            <a id="edit" style="width: 100%;text-align: center;display: block">编辑此信息</a>
                            <a id="del" style="width: 100%;text-align: center;display: block">删除此信息</a>
                        @else
                            <a href="javascript:void(0)" style="width: 100%;text-align: center;display: block;font-size: 12px;">== END 感谢您的阅读 END ==</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        {{--<div class="mui-card-footer">--}}
        {{--<span>浏览：124人</span>--}}
        {{--</div>--}}
    </div>

    <div class="mui-card block" v-on:click="detail(1)" @if($news['type'] ==2) style="display: block" @endif>
        <div class="mui-card-header">
            <div class="mui-media-body">
                <h3>{{$news['title']}}</h3>
                <p>{{$news['created_at']}}</p>
            </div>
        </div>
        <div class="mui-card-content">
            <div class="content_block">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">联系人：{{$news['contact_people']}}</li>
                    <li class="mui-table-view-cell">联系电话：<span class="dial" phone="{{$news['contact_phone']}}"> <i class="fa fa-phone" style="color: green;margin-right: 10px;"></i> {{$news['contact_phone']}}</span></li>
                    <li class="mui-table-view-cell">意向区域：{{$news['area']}}</li>
                    <li class="mui-table-view-cell">求购产量：{{$news['production']}}</li>
                    <li class="mui-table-view-cell">资金预算：{{$news['unit_price']}}</li>
                    <li class="mui-table-view-cell">产品单位：{{$news['unit']}}</li>
                </ul>
                <div class="mui-card">
                    <div class="mui-card-content" style="color: #8f8f94;">
                        <img src="{{$news['product_images'][0]}}" data-preview-src="{{$news['product_images'][0]}}" style="width: 100%;">
                        求购备注：{{$news['product_desc']}}
                    </div>
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">以下为产品参考图片</div>
                </div>
                @foreach ($news['product_images'] as $images)
                    <img src="{{$images}}" data-preview-src="{{$images}}">
                @endforeach
                <div class="mui-card">
                    <!--页脚，放置补充信息或支持的操作-->
                    <div class="mui-card-footer">
                        @if ($uid === $news['uid'])
                            <a id="edit" style="width: 100%;text-align: center;display: block">编辑此信息</a>
                            <a id="del" style="width: 100%;text-align: center;display: block">删除此信息</a>
                        @else
                            <a href="javascript:void(0)" style="width: 100%;text-align: center;display: block;font-size: 12px;">== END 感谢您的阅读 END ==</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        {{--<div class="mui-card-footer">--}}
        {{--<span>浏览：124人</span>--}}
        {{--</div>--}}
    </div>
    <script src="{{asset('mui/js/mui.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.previewimage.js')}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.zoom.js')}}" type="text/javascript"></script>
    <script type="text/javascript">
        mui.previewImage();
        $("#edit").click(function () {
            window.location.href = "{{url('mobile/news/edit')}}?id={{$news['id']}}"
        })
    </script>
    <script src="{{asset('layui/layui.js?'.time())}}" type="text/javascript"></script>
    <script src="{{asset('mui/js/mui.min.js?'.time())}}" type="text/javascript"></script>
    <script type="text/javascript">
        layui.use(['element','jquery','layer'], function () {
            var element = layui.element,
                layer = layui.layer,
            $ = layui.jquery;
            $(".dial").click(function () {
                let phone = $(this).attr("phone");
                mui.confirm(phone, '是否需要联系', ['取消','呼叫'], function(e) {
                    if (e.index == 1) {
                        window.location.href = 'tel:'+phone;//拨打客服电话
                    }
                });
            })
            $("#del").click(function () {
                layer.confirm('是否确认删除？', {
                    title:'删除提示',
                    btn: ['确定删除','还是算了'] //按钮
                }, function(){
                    $.get("{{url('mobile/news/deleted')}}"+"?id="+"{{$news['id']}}", function(result){
                        layer.msg(result.msg,[],function () {
                            if (result.code == 200){
                                window.location.href = "{{url('mobile/news/first')}}"
                            }
                        })
                     });
                }, function(){
                });
            })
        });
    </script>
@stop